<template>
  <div class="headerContent">
    <img class="img1" :src="imgUrl + home.logo" alt="" @click="navTo" />
    <img class="img2" :src="imgUrl + home.logo_h5" alt="" @click="navTo" />

    <div class="info" v-if="info">
      <a-popconfirm
        title="点击头像可以更改个人信息哦"
        :visible="tcBool"
        ok-text="我已了解"
        cancel-text="去更改"
        @confirm="confirm"
        @cancel="cancel"
      >
        <img :src="imgUrl + info.avatar" alt="" @click="navToSetUp" />
      </a-popconfirm>
      <span style="margin-left: 30px">{{ info.nickname }}，您好</span>
      <span class="button" @click="removeFn">退出</span>
    </div>
  </div>
</template>

<script>
import { defineComponent, ref } from "vue";
import { message } from "ant-design-vue";
import { useRouter } from "vue-router";
import { imgUrl } from "@/api/https.js";

export default defineComponent({
  setup() {
    const router = useRouter();
    const info = JSON.parse(localStorage.getItem("info"));
    const home = JSON.parse(localStorage.getItem("publicInfo"));
    const tcBool = ref();

    if (localStorage.getItem("tcBool")) {
      tcBool.value = false;
    } else {
      tcBool.value = true;
    }

    const navTo = () => {
      router.push({
        name: "Home",
      });
    };

    const confirm = () => {
      tcBool.value = false;
      localStorage.setItem("tcBool", 1);
    };

    const cancel = () => {
      tcBool.value = false;
      localStorage.setItem("tcBool", 1);
      navToSetUp();
    };

    const removeFn = () => {
      localStorage.removeItem("info");
      localStorage.removeItem("token");
      localStorage.removeItem("tcBool");
      router.push({
        name: "Login",
      });
      message.success({
        content: "您已退出登录",
        key: "msg",
      });
    };

    const navToSetUp = () => {
      router.push({
        name: "Setup",
      });
    };

    return {
      router,
      info,
      home,
      imgUrl,
      removeFn,
      navToSetUp,
      navTo,
      tcBool,
      cancel,
      confirm,
    };
  },
});
</script>

<style lang="less" scoped>
.headerContent {
  width: 100%;
  max-width: var(--maxMargin);
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto;
  padding: 10px;

  .img1 {
    height: var(--headerHeight1);
    display: var(--headerImg1);
  }

  .img2 {
    height: var(--headerHeight1);
    display: var(--headerImg2);
  }

  .info {
    img {
      border-radius: 50%;
      height: var(--headerHeight2);
    }

    .button {
      background-color: #554de5;
      border: 1px solid #fff;
      border-radius: 10px;
      padding: 10px 15px;
      letter-spacing: 1px;
      color: #fff;
      cursor: pointer;
      transition: all 0.3s;
      margin-left: 20px;
    }
    .button:hover {
      border: 1px solid #554de5;
      color: #554de5;
      background-color: transparent;
    }
  }
}
</style>
